<template>
    <div class="source-list-com">
        <el-table :data="postlist" :show-header="false" :height="160" stripe empty-text="暂无资源">
            <el-table-column width="50">
                <template #default="scope">
                    <span>
                        <el-image :src="iconurl(scope.row.type)" />
                    </span>
                </template>
            </el-table-column>
            <el-table-column width="220" show-overflow-tooltip>
                <template #default="scope">
                    <div style="color: #2a97d1;font-size: 13px;
                font-weight: 300;">{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column width="200">
                <template #default="scope">
                    <div>{{ scope.row.createTime }}</div>
                </template>
            </el-table-column>
            <el-table-column width="100" align="center">
                <template #default="scope">
                    <el-text>{{ scope.row.size }}</el-text>
                </template>
            </el-table-column>
            <el-table-column width="150">
                <template #default="scope">
                    <div class="options">
                        <el-link type="primary" @click="previewbtn(scope.row)">在线预览</el-link>
                        <el-divider direction="vertical" />
                        <el-link type="primary" @click="downloadbtn(scope.row)">下载</el-link>
                    </div>
                </template>
            </el-table-column>
            <el-table-column>
                <template #default="scope">
                    <span v-if="!check_true" style="cursor: pointer;" @click="unlock"><el-icon
                            :size="16"><i-ic-outline-lock /></el-icon></span>
                    <span v-else><el-icon :size="16"><i-uil-unlock-alt /></el-icon></span>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-drawer v-model="isdrawer" direction="ltr" destroy-on-close size="100%"
        :show-close="previewtype !== 'el-image-viewer'">
        <PreviewCompoonent :comtype="previewtype" :url="previewUrl" @closepreview="handleclose" />
    </el-drawer>
</template>

<script setup lang="ts">
import { iconurl } from "@utils/filetype";
import { usePostInfo } from "@store/postinfo";
import { storeToRefs } from "pinia";
import { Tsourcefile } from "@/models/sourcefile";
import { get_file } from "@/api/courseapi";
import { ref } from "vue";
import { CompType } from "@components/PreviewComponent/type";
import { useUserInfo } from "@store/userinfo";
import { unlock_post } from "@api/userapi";

const { postlist, check_true, postinfo } = storeToRefs(usePostInfo());
const { userinfo } = storeToRefs(useUserInfo());

const isdrawer = ref<boolean>(false);
const previewtype = ref<CompType>();
const previewUrl = ref<string>();

//关闭子组件的预览，关闭窗口
const handleclose = (value: boolean) => {
    isdrawer.value = value;
};

const unlock = () => {
    ElMessageBox.confirm(
        '解锁该贴子,是否花费2积分进行解锁?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await unlock_post({ postId: postinfo.value.id });
            if (res.code === 200) {
                ElMessage.success(res.msg);
                userinfo.value.code -= 2;
                check_true.value = true;
                return;
            }
            ElMessage.error(res.msg);
        })
}

const downloadbtn = async (file: Tsourcefile) => {
    if (check_true.value) {
        const res = await get_file({ fileName: `${file.fileMd5}-${file.name}` });
        if (res.code === 200) {
            const link = document.createElement("a");
            link.href = res.data;
            link.download = file.name;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    } else {
        unlock();
    }
}

const previewbtn = async (file: Tsourcefile) => {
    const res = await get_file({ fileName: `${file.fileMd5}-${file.name}` });
    if (res.code === 200) {
        previewUrl.value = res.data;
        switch (file.type) {
            case "application/pdf":
                isdrawer.value = true;
                previewtype.value = "vue-office-pdf";
                break;
            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                isdrawer.value = true;
                previewtype.value = "vue-office-docx";
                break;
            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                isdrawer.value = true;
                previewtype.value = "vue-office-excel";
                break;
            case (file.type.match(/^image/) || {}).input:
                //图片文件处理
                isdrawer.value = true;
                previewtype.value = "el-image-viewer";
                break;
            default:
                ElMessage.error("暂不支持预览这个格式的文件！");
                return
                break;
        }
    }
}


</script>

<style scoped lang="less"></style>
